<template>
    <div class="content">
        <div class="allmap" ref="allmap"></div>
        <div class="tab">
            <!-- 1.引入并使用mint-ui NavBar-->
                <!-- 为其添加点击伸缩事件 -->
            <div class="arrow" @click="handlerArrowClick()">V</div>
            <!-- 3.使用navbar -->
            <navbar v-model="selected">
                <tab-item id="1">酒店</tab-item>
                <tab-item id="2">景点</tab-item>
            </navbar>
            <!-- tab-container -->
            <tab-container v-model="selected">
                <tab-container-item id="1">
                    <!-- 通过点击事件确定点击的目标对象。由于该事件是绑定到外来组件上，所以加上一个native,表明是一个原生事件-->
                    <cell v-for="item of  addressList[0]" :title="item.title"  :label="item.label" :key="item.id" @click.native="handleCellClick(item.id)"/>
                </tab-container-item>
                <tab-container-item id="2">
                    <cell v-for="item of  addressList[1]" :title="item.title"  :label="item.label" :key="item.id" @click.native="handleCellClick(item.id)"/>
                </tab-container-item>
            </tab-container>
        </div>
    </div>
</template>

<script>
// 2.在当前页面引入navbar
import { Navbar, TabItem ,TabContainer,TabContainerItem,Cell} from 'mint-ui';
// 引入自定义的marker图片
import markerImg from '../../../assets/img/marker.png'
export default {
    name: 'mapContent',
    // 对Detail组件派发过来的数据进行接收
    props:{
        addressList: Array
    },
    components:{Navbar, TabItem ,TabContainer,TabContainerItem,Cell},
    data(){
        return{
            flag: '1',//左右选项标志位
            clickFlag: '0',//点击事件存在时的标志位
            selected: '1' //默认选择第一个内容
        }
    },
    methods:{
        // 定义地图事件
        addMasker(m,n){
            // 新建地图实例
                // 通过ref获取节点
            let map=new BMap.Map(this.$refs.allmap)
            // 你地址解析
            let myGeo=new BMap.Geocoder()
            // 循环添加题图标注
            for(let i=0;i<this.addressList.length;i++){
                for(let j=0;j<this.addressList[i].length;j++){
                    let title=this.addressList[m][n]
                    // 进行样式添加
                    // getPoint接收当前地址的传参——》可以获取经纬度(将地址转换为经纬度)
                    myGeo.getPoint(this.addressList[i][j].title,function(point){
                        // 判断地址是否存在，将不同地址的改变作为传传参
                        if(point){
                            // 加载第一个地址
                            if(i===m && j===n){
                                // 定义地图缩放等级为15
                                map.centerAndZoom(point,15)
                                // 定义 自定义icon: 图片，图片大小，图片周边距离
                                let myIcon=new BMap.Icon(markerImg,new BMap.Size(50,50),{imageOffset:new BMap.Size(14,2)})
                                // 添加标注,并定义样式
                                let marker=new BMap.Marker(point,{
                                    icon: myIcon
                                })
                                // 将样式添加到地图界面上
                                map.addOverlay(marker)
                                // 添加信息窗口
                                let infoWindow=new BMap.InfoWindow(title.title)
                                // 为窗口设置宽高
                                infoWindow.setWidth(250)
                                infoWindow.setHeight(60)
                                // 在地图上打开信息窗口,并确定中心点
                                map.openInfoWindow(infoWindow,map.getCenter())
                            }else{
                                // 其它地址的样式
                                map.centerAndZoom(point,15)
                                let marker=new BMap.Marker(point)
                                map.addOverlay(marker)
                            }
                        }else{
                            console.log('抱歉，未找到')
                        }

                    })
                }
            }   
        },
        // 选择不同地址
        changeMasker(id){
            // 保存一下地址
            let page=parseInt(this.flag)-1
            // 保存一下下标
            let index=parseInt(id)-1
            // 改变样式
            this.addMasker(page,index)
        },
        // 定义左右选项里，每个子元素的点击事件
        handleCellClick(id){
            if(this.flag==='1'){
                this.changeMasker(id)
            }else{
                this.changeMasker(id)
            }
        },
        // 点击时，伸缩地址信息选项
        handlerArrowClick(){
            // 通过标志位的值来判断，是否有点击
            if(this.clickFlag==='0'){
                this.$refs.allmap.style.height='20%'
                this.clickFlag='1'
            }else{
                this.$refs.allmap.style.height='60%'
                this.clickFlag='0'
            }
        }
    },
    // 通过：seleted值,来监听一下，到底选择的是哪个选项(景点，酒店))
    watch:{
        // val 为id值
        selected(val){
            if(val==='1'){
                this.flag='1'
            }else{
                this.flag='2'
            }
        }
    },
    // 自动加载
    mounted(){
        // 添加地图标注
        this.addMasker(0,0)
    }
}
</script>

<style lang="stylus" scoped>
.content
  position:absolute
  top:0
  left:0
  right:0
  bottom:0
  background:#fff
  z-index:100
  .allmap
    position:relative
    top:0
    left:0
    right:0
    bottom:.6rem
    z-index:11111
    height:60%
  .tab
    color:#000
    .arrow
      text-align:center
</style>